<template>
	<view class="container">
		<view class="header" :style="{ backgroundImage: 'url(' + url + Background + ')' }">
			<view class="dis-flex flex-y-center">
				<image class="imgicon" src="/static/imgs/fenlei.png" mode="widthFix" @click="() => show = true" />
				<view class="book flex-box">官宣书</view>
				<view class="dis-flex flex-y-center">
					<u-upload :fileList="fileList" name="files" @afterRead="afterRead">
						<view class="upload">上传背景</view>
					</u-upload>
					<image class="imgicon2" src="/static/imgs/fx.png" mode="widthFix" />
				</view>
			</view>
			<view class="official">官宣日期</view>
			<view class="officialTime">{{ formattedLovetime(relationship.lovetime) }}</view>
			<view class="dis-flex flex-x-center flex-y-center boxWrap">
				<image class="avatar" v-if="user.avatar" :src="url + user.avatar" style="border-radius: 50%;" />
				<image class="avatar" v-else src="/static/imgs/tou.png" />
				<view class="nameWrap">
					<view class="name" v-if="zhenshi">{{ user.username }}</view>
					<view class="name" v-else>{{ user.name }}</view>
					<view class="ids">ID：{{ user.I_D }}</view>
				</view>
			</view>
			<view class="dis-flex flex-x-center flex-y-center boxWrap">
				<image class="avatar" v-if="ship.avatar" :src="url + ship.avatar" style="border-radius: 50%;" />
				<image class="avatar" v-else src="/static/imgs/gx_add.png" @click="toJump('/pages/index/binding')" />
				<view class="nameWrap">
					<view class="name" v-if="zhenshi">{{ ship.username || "未绑定" }} </view>
					<view class="name" v-else>{{ ship.name }}</view>
					<view class="ids">ID：{{ ship.I_D }}</view>
				</view>
			</view>

			<view class="dis-flex flex-x-center flex-y-center boxLine">
				<view class="line"></view>
				<view class="nameWrap">
					<view class="days">在一起的天数</view>
					<view class="nums">{{ day }}</view>
				</view>
			</view>

			<view class="dis-flex flex-x-between flex-y-center boxDot">
				<view class="dis-flex flex-x-between flex-y-center" @click="switchName()">
					<view class="dot"></view>
					<view class="txts">（昵称和真实姓名显示切换开关）</view>
				</view>

				<view class="txts" v-if="relationship.registration_number">官宣书登记字号：{{ relationship.registration_number
					}}
				</view>
			</view>
		</view>

		<view class="notice_box">
			<view class="register_txt tac">
				<u-tabs :list="tabs" lineColor="#252525" :activeStyle="activeStyle" :current="current"
					@click="tabClick"></u-tabs>
			</view>
			<view class="u-content">
				<WaterFall :list="list" :type="type" v-if="waterFall" :userid="ship.id"></WaterFall>
			</view>
		</view>
		<!-- 左侧弹窗 -->
		<u-popup :show="show" mode="left" @close="() => show = false">
			<view class="menus">
				<view class="items" v-for="item in menus" @click="Anoath(item.id)" :key="item.id">{{ item.name }}</view>
			</view>
		</u-popup>
		<Publish :show='isPublish' @changeClose="() => isPublish = false"></Publish>
		<!-- <view style="position: fixed; bottom: 0; left: 0; right: 0;"> -->
			<Tabbar path="/pages/index/index"></Tabbar>
		<!-- </view> -->

	</view>
</template>
<script>
import {
	myLove
} from '../../api/love.js'
import env from '@/utlis/env.js';
import WaterFall from '@/components/waterfall/waterfall'
import Publish from '@/components/publish'
import { uploadImage } from "../../api/common.js"

import {
	mapGetters
} from "vuex";
import st from "../../utlis/showtoast.js";

export default {
	components: {
		WaterFall,
		Publish
	},
	data() {
		return {
			waterFall: true,
			zhenshi: true,
			fileList: [],
			show: false,
			current: 0,
			isPublish: false,
			tabs: [{
				name: '情侣宣文'
			}, {
				name: '闺蜜宣文'
			}],
			list: [],
			menus: [{
				name: '绑定介绍',
				id: 1
			}, {
				name: '宣文介绍',
				id: 2
			}],
			user: {},
			ship: {},
			day: 0,
			relationship: {},
			activeStyle: {
				color: '#252525'
			},
			url: '',
			type: 4,
			Background: ''
		}
	},
	onLoad() {
		uni.hideTabBar()
	},
	computed: {
		...mapGetters({
			page_update_notice: "page_update_notice",
		}),

	},

	mounted() {
		this.url = env.baseUrl

	},
	onShow() {
		this.waterFall = true
		this.love()
	},
	onHide() {
		this.waterFall = false
	},
	watch: {
		page_update_notice() {
			this.isPublish = true
		}
	},
	methods: {

		Anoath(id) {
			console.log(id)
			if (id == 1) {
				uni.navigateTo({
					url: "/pages/login/agreement?type=binding"
				})
			} else {
				uni.navigateTo({
					url: "/pages/login/agreement?type=announcement"
				})
			}
		},
		// 上传背景图
		async afterRead(e) {
			console.log(e)
			const res = await uploadImage(e.file.url)
			// console.log(res)
			this.Background = res.data.url
			// console.log(this.Background)
			console.log(this.url + this.Background)
		},
		formattedLovetime(lovetime) {
			// 如果时间戳不存在，则使用当前时间戳
			const lovetimeTimestamp = lovetime || Math.floor(Date.now() / 1000);

			// 将时间戳转换为日期对象
			const lovetimeDate = new Date(lovetimeTimestamp * 1000);

			// 获取年月日
			const year = lovetimeDate.getFullYear();
			const month = ('0' + (lovetimeDate.getMonth() + 1)).slice(-2);
			const day = ('0' + lovetimeDate.getDate()).slice(-2);

			// 构建年月日字符串
			return `${year}年${month}月${day}日`;
		},
		switchName() {
			if (this.zhenshi) {
				this.zhenshi = false
			} else {
				this.zhenshi = true
			}

		},
		toJump(url) {
			if (!url) return
			uni.navigateTo({
				url
			});
		},

		tabClick(e) {
			console.log('切换宣文', e);
			this.current = e.index
			if (e.index == 0) {
				this.type = 4
			}
			if (e.index == 1) {
				this.type = 5
			}
		},
		// 获取详情数据
		async love() {
			const res = await myLove({
				'type': 1
			}).then(res => {
				console.log(res, '我的情侣');
				this.user = res.data.user
				this.ship = res.data.ship
				this.day = res.data.day
				this.relationship = res.data.relationship
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	background: #fff;

	.header {
		background: #F6F6F6;
		height: 860rpx;
		padding: 52rpx 30rpx 45rpx;
		padding-top: 88rpx;

		background-size: cover;

		.imgicon {
			width: 36rpx;
		}

		.book {
			font-weight: bold;
			font-size: 34rpx;
			color: $uni-text-color;
			margin-left: 20rpx;
		}

		.upload {
			width: 138rpx;
			height: 42rpx;
			line-height: 42rpx;
			text-align: center;
			border-radius: 21rpx;
			border: 1px solid $uni-border-color;
			font-size: 24rpx;
			color: $uni-text-color-placeholder;
			margin-right: 20rpx;
		}

		.imgicon2 {
			width: 40rpx;
		}

		.official {
			font-weight: bold;
			font-size: 34rpx;
			color: $uni-text-color;
			text-align: center;
			margin: 30rpx auto;
		}

		.officialTime {
			font-weight: bold;
			font-size: 60rpx;
			color: $uni-text-color;
			text-align: center;
			margin-bottom: 12rpx;
		}

		.boxWrap {
			margin-bottom: 38rpx;

			.avatar {
				width: 110rpx;
				//flex-shrink: 0;
				height: 110rpx;
			}

			.nameWrap {
				margin-left: 35rpx;

				.name {
					font-weight: 800;
					font-size: 32rpx;
					color: $uni-text-color;
					margin-bottom: 20rpx;
				}

				.ids {
					min-width: 200rpx;
					font-size: 30rpx;
					color: $uni-text-color-primary;
				}
			}
		}

		.boxLine {
			margin-bottom: 32rpx;

			.line {
				width: 4rpx;
				height: 98rpx;
				background: $uni-text-color;
			}

			.nameWrap {
				margin-left: 40rpx;

				.days {
					font-size: 30rpx;
					color: $uni-text-color-primary;
				}

				.nums {
					font-weight: bold;
					font-size: 48rpx;
					color: $uni-text-color;
					margin-top: 20rpx;
				}
			}
		}

		.boxDot {
			.dot {
				width: 30rpx;
				height: 30rpx;
				background: $uni-text-color-primary;
				box-shadow: 0px 5rpx 5rpx 0px rgba(0, 0, 0, 0.6);
				border-radius: 50%;
			}

			.txts {
				font-size: 22rpx;
				color: $uni-text-color;
			}
		}
	}

	.notice_box {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 0px 30rpx 0rpx rgba(202, 202, 202, 0.6);
		border-radius: 50rpx 50rpx 0 0;
		margin: -30rpx auto 0;
		padding: 34rpx 10rpx;
		min-height: 1000rpx;
		.register_txt {
			/deep/.u-tabs__wrapper__nav__item {
				flex: 1;
			}
		}
	}

	.menus {
		padding: 60rpx 100rpx 30rpx;

		.items {
			font-size: 30rpx;
			color: $uni-text-color;
			line-height: 90rpx;
		}
	}
}
</style>